<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>NicePage demo</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="css/layui.css" type="text/css" rel="stylesheet">
</head>

<BODY>
<center style="padding-top: 40px">
    <div style="width: 80%;padding-top: 20px">
        <div id="table"></div>
    </div>

</center>
<script src="lib/jquery-3.3.1.min.js"></script>
<script language="Javascript" src="lib/layui.js"></script>
<script language="Javascript" src="lib/nicePage.js"></script>
<script LANGUAGE="javascript">
    //标准json格式 目前只支持[{a:b,c:d},{a:b,c:d}]此种格式
    var json = [{
        "id": "1",
        "name": "Tom",
        "age": "12"
    }, {
        "id": "2",
        "name": "Joy",
        "age": "13"
    }, {
        "id": "3",
        "name": "Tom",
        "age": "12"
    }, {
        "id": "4",
        "name": "Joy",
        "age": "13"
    }, {
        "id": "5",
        "name": "Tom",
        "age": "12"
    }, {
        "id": "6",
        "name": "Joy",
        "age": "13"
    }, {
        "id": "7",
        "name": "Tom",
        "age": "12"
    }, {
        "id": "8",
        "name": "Joy",
        "age": "13"
    }, {
        "id": "9",
        "name": "Tom",
        "age": "12"
    }, {
        "id": "10",
        "name": "Joy",
        "age": "13"
    }, {
        "id": "11",
        "name": "Tom",
        "age": "12"
    }, {
        "id": "12",
        "name": "Joy",
        "age": "13"
    }, {
        "id": "13",
        "name": "Tom",
        "age": "12"
    }, {
        "id": "14",
        "name": "Joy",
        "age": "13"
    }, {
        "id": "15",
        "name": "Tom",
        "age": "12"
    }, {
        "id": "16",
        "name": "Joy",
        "age": "13"
    }, {
        "id": "17",
        "name": "Tom",
        "age": "12"
    }, {
        "id": "18",
        "name": "Joy",
        "age": "13"
    }, {
        "id": "19",
        "name": "Tom",
        "age": "12"
    }, {
        "id": "20",
        "name": "Joy",
        "age": "13"
    },{
        "id": "21",
        "name": "Joy",
        "age": "13"
    }];

    //nameList与widthList的数组长度要一致
    var nameList = ['序号', '姓名', '年龄'] //table的列名
    var widthList = [100, 100, 100] //table每列的宽度

    /**
     * 初始化设置nicepage组件    v1.0
     *-------------------------------------------------------------
     * 进行数据组装,与layui交互进行元素渲染
     *-------------------------------------------------------------
     * @param    {string}  table     table的div id
     * @param    {string}  bar     底部分页的div id
     * @param    {int}  limit     每页默认行数
     * @param    {string}  color     底部分页的颜色
     * @param    {array}  layout     底部分页的布局,具体可参考layui api
     *
     * @date     2018-10-19
     * @author   duzhen wechat：wenxuejn
     */
    $(function () {
        nicePage.setCfg({
            table: 'table',
            bar: 'pageBar',
            limit: 20,
            color: '#1E9FFF',
            layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
        });
    }); //初始化完成
</script>

</html>